<template>
  <div class="emissions-footer">
    <div class="tabs-list">
      <div
        :class="`tab tab-${index}`"
        v-for="(item, index) in tabs"
        :style="{
          left: `${84 * index + 30 * index}px`,
        }"
        :key="index"
        @click="clickTab(index)"
      >
        <img
          class="icon"
          :src="active == index ? item.imgActive : item.img"
          alt=""
        />
        <span :class="['name', active == index ? 'active' : '']">{{ item.name }}</span>
      </div>
    </div>
    <div class="footer-bg"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabs: [
        {
          img: require('../images/tab-1.png'),
          imgActive: require('../images/tab-active-1.png'),
          name: '空气微站监测'
        },
        {
          img: require('../images/tab-2.png'),
          imgActive: require('../images/tab-active-2.png'),
          name: '清洁能源'
        },
        {
          img: require('../images/tab-3.png'),
          imgActive: require('../images/tab-active-3.png'),
          name: '生产制造'
        },
        {
          img: require('../images/tab-4.png'),
          imgActive: require('../images/tab-active-4.png'),
          name: '有组织监测'
        },
        {
          img: require('../images/tab-5.png'),
          imgActive: require('../images/tab-active-5.png'),
          name: '无组织监测'
        },
        {
          img: require('../images/tab-6.png'),
          imgActive: require('../images/tab-active-6.png'),
          name: '视频监控'
        }
      ]
    }
  },
  methods: {
    clickTab(index) {
      if (index > 0) return
      this.active = index
    }
  }
}
</script>

<style lang="scss" scoped>
.emissions-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  background-size: 100% 100%;
  animation: slide-header 2s;
  .tabs-list {
    width: 34%;
    height: 64px;
    position: absolute;
    left: 33%;
    bottom: 70px;
    z-index: 20;
    .tab {
      position: absolute;
      top: 0;
      width: 84px;
      height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .icon {
        width: 60px;
        height: 46px;
      }
      .name {
        color: #fff;
        text-shadow: 0px 1.063px 2.127px #001637;
        font-size: 14px;
        font-weight: 600;
        opacity: 0.5;
      }
      .name.active {
        opacity: 1;
      }
    }
    .tab-0,
    .tab-5 {
      top: 20px;
    }
    .tab-1,
    .tab-4 {
      top: 10px;
    }
  }
  .footer-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1920px;
    height: 72px;
    background-image: url('../images/bottom-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
